<template>
<div>
    <AutoQuery ref="auto-query" :query="query" :page="page" :buttons="['search','search_all','export_excel']"></AutoQuery>
    <Button type="primary" @click="handleSendMessage(0,true)" v-if="checkPermission('110428')">批量发送消息</Button>
    <auto-table :columns="columns" :data="data" :page="page"></auto-table>
    <Modal v-model="modal.is_show" title="发送消息" width="40">
        <div v-if="modal.is_batch" style="color:red;margin-bottom:10px">*此消息将批量发送给当前搜索条件下的{{page.total}}个用户</div>
		<Form ref="formValidate" :model="modal.data" :rules="modal.rules" :label-width="100">
			<FormItem label="发送方式" prop="medium">
                <CheckboxGroup v-model="modal.data.medium">
                    <Checkbox label="system">系统</Checkbox>
                    <Checkbox label="phone">短信</Checkbox>
                    <Checkbox label="email">邮箱</Checkbox>
                </CheckboxGroup>
			</FormItem>
			<FormItem label="消息标题" prop="message_title">
				<Input v-model="modal.data.message_title" placeholder="输入消息标题"></Input>
			</FormItem>
			<FormItem label="消息内容" prop="content">
				<Input v-model="modal.data.content" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="输入消息内容"></Input>
			</FormItem>
			<FormItem label="发送日期和时间" prop="time">
				<DatePicker v-model="modal.data.time" type="datetime" placeholder="Select date and time" style="width: 200px"></DatePicker>
			</FormItem>
		</Form>
		<div slot="footer">
            <Button type="text" size="large" @click="cancel">取消</Button>
            <Button type="primary" size="large" @click="ok('formValidate')">{{modal.is_batch ? '批量发送' : '发送'}}</Button>
		</div>
	</Modal>
    <Modal v-model="detail_modal.is_show" title="会员详细信息" width="40">
        <div class="sheet">
            <table v-if="detail_modal.data">
                <tr>
                    <td>编号</td>
                    <td>{{ detail_modal.data.number }}</td>
                </tr>
                <tr>
                    <td>用户名</td>
                    <td>{{ detail_modal.data.username }}</td>
                </tr>
                <tr>
                    <td>注册时间</td>
                    <td>{{ Date.formatTimeStamp(detail_modal.data.create_time) }}</td>
                </tr>
                <tr>
                    <td>{{role_type_name}}名称</td>
                    <td>{{ detail_modal.data.enterprise_name }}</td>
                </tr>
                <tr>
                    <td>{{role_type_name}}类别</td>
                    <td>{{ detail_modal.data.member_type }}</td>
                </tr>
                <tr>
                    <td>{{role_type_name}}简介</td>
                    <td>{{ detail_modal.data.enterprise_profile }}</td>
                </tr>
                <tr>
                    <td>统一社会信用代码</td>
                    <td>{{ detail_modal.data.usci }}</td>
                </tr>
                <tr>
                    <td>营业执照编码</td>
                    <td>{{ detail_modal.data.business_licence }}</td>
                </tr>
                <tr>
                    <td>营业执照照片</td>
                    <td><img :src="detail_modal.data.business_licence_pic.dataUrl" style="max-height:200px" /></td>
                </tr>
                <tr>
                    <td>注册资本</td>
                    <td>{{ detail_modal.data.registered_capital }} 万元</td>
                </tr>
                <tr>
                    <td>部门</td>
                    <td>{{ detail_modal.data.department }}</td>
                </tr>
                <tr>
                    <td>联系人姓名</td>
                    <td>{{ detail_modal.data.name }}</td>
                </tr>
                <tr>
                    <td>联系方式</td>
                    <td>{{ detail_modal.data.mobile_phone }}</td>
                </tr>
                <tr>
                    <td>邮箱</td>
                    <td>{{ detail_modal.data.email }}</td>
                </tr>
                <tr>
                    <td>所处地区</td>
                    <td>{{ detail_modal.data.area.toString() }}</td>
                </tr>
                <tr>
                    <td>详细地址</td>
                    <td>{{ detail_modal.data.address }}</td>
                </tr>
                <tr>
                    <td>logo</td>
                    <td><img :src="detail_modal.data.logo.dataUrl" style="max-height:200px" /></td>
                </tr>
                <tr>
                    <td>详细地址坐标</td>
                    <td>
                        <div v-if="detail_modal.data.coordinate.length==2">经度：{{detail_modal.data.coordinate[0]}}，纬度：{{detail_modal.data.coordinate[1]}}</div>
                    </td>
                </tr>
                <tr>
                    <td>手机是否认证</td>
                    <td>{{ detail_modal.data.is_mobile_phone_authed ? "已认证" : "未认证" }}</td>
                </tr>
                <tr>
                    <td>邮箱是否已验证</td>
                    <td>{{ detail_modal.data.is_email_authed ? "已认证" : "未认证" }}</td>
                </tr>
                <tr>
                    <td>会员身份类型</td>
                    <td>{{ role_type_name }}</td>
                </tr>
                <tr>
                    <td>身份证号</td>
                    <td>{{ detail_modal.data.identity_card }}</td>
                </tr>
                <tr>
                    <td>身份证是否认证</td>
                    <td>{{ detail_modal.data.is_identity_card_authed ? "已认证" : "未认证" }}</td>
                </tr>
                <tr>
                    <td>{{role_type_name}}认证状态</td>
                    <td>{{ detail_modal.data.status ? "已认证" : "未认证" }}</td>
                </tr>
                <tr>
                    <td>审核状态</td>
                    <td>{{ ['未提交', '待审核', '已通过', '审核未通过'][detail_modal.data.status] }}</td>
                </tr>
                <tr>
                    <td>账户状态</td>
                    <td>{{ detail_modal.data.is_ban ? "已封号" : "正常" }}</td>
                </tr>
                <tr>
                    <td>用户评分</td>
                    <td>{{ detail_modal.data.rate }}分</td>
                </tr>
                <tr>
                    <td>登陆状态</td>
                    <td>{{ detail_modal.data.landing_state ? "在线" : "离线" }}</td>
                </tr>
                <tr>
                    <td>合作成功数量</td>
                    <td>{{ detail_modal.data.success_count }}</td>
                </tr>
                <tr v-if="is_service">
                    <td>已发布服务数量</td>
                    <td>{{ detail_modal.data.posted_count }}</td>
                </tr>
                <tr v-if="is_demand">
                    <td>已申请的平台服务列表</td>
                    <td>
                        <div v-for="(item,index) in detail_modal.data.successplateform" :key="index">
                            {{ item.plateformservice.title }}
                        </div>
                    </td>
                </tr>
            </table>
        </div>
		<div slot="footer">
            <Button type="text" size="large" @click="detail_modal.is_show=false">关闭</Button>
		</div>
	</Modal>
</div>
</template>

<script>
import Page from "@/common/model/Page";
import AutoQuery from "@/common/components/AutoQuery";
import AutoTable from "@/common/components/AutoTable";
import Member from "@/common/model/Member";
import parent from "../Parent";

export default {
    extends:parent,
    components: {
        AutoQuery, AutoTable
    },
    data() {
        return {
            page: new Page("search/member"),
            query: { // 查询条件
                id: { type: "input", label: "用户ID：", placeholder: "请输入用户ID" },
                role_type: { type: "select", label: "用户类别：", default: "0", placeholder: "请选择用户类别", options: [
                        { value: "0", label: "全部" },
                        { value: "3", label: "个人" },
                        { value: "4", label: "企业" },
                        { value: "5", label: "服务机构" }
                ] },
                username: { type: "input", label: "用户名：", placeholder: "请输入用户名" },
                title: { type: "input", label: "单位名称：", placeholder: "请输入单位名称" },
                begin_time: { type: "date", label: "日期", placeholder: "选择开始时间" },
                status: { type: "select", label: "审核状态：", default: "-1", placeholder: "请选择审核状态", options: [
                        { value: "-1", label: "全部" },
                        { value: "0", label: "未提交" },
                        { value: "1", label: "待审核" },
                        { value: "2", label: "已通过" },
                        { value: "3", label: "审核未通过" }
                ] },
                end_time: { type: "date", placeholder: "选择截止时间", handleValue: value => { return value + 24*60*60*1000 } },
            },
            modal: {
                is_show: false,
                is_batch: false,
                data: {
                    id: 0,
                    medium: ["system"],
                    message_title: "",
                    content: "",
                    time: ""
                },
                rules: {
                    message_title: [
                        { required: true, message: '消息标题不能为空', trigger: 'blur' }
                    ],
                    content: [
                        { required: true, message: '消息内容不能为空', trigger: 'blur' }
                    ],
                    medium: [
                        { required: true, type: 'array', min: 1, message: '必须至少选择一种消息发送方式', trigger: 'change' }
                    ]
                }
            },
            detail_modal: {
                is_show: false,
                data: null
            },
            columns: [
                {
                    title: '用户ID', align: 'center', width: 100, key: 'id'
                },
                {
                    title: '用户名', align: 'center', key: 'username'
                },
                {
                    title: '认证状态', align: 'center', width: 100, render: (h, params) => {
                        return h('div', {
                            style: { color: params.row.status==2?'#000':'#f00' }
                        }, params.row.status==2?'已认证':'未认证');
                    }
                },
                {
                    title: '账户状态', align: 'center', width: 100, render: (h, params) => {
                        return h('div', {
                            style: { color: params.row.is_ban == 1 ? '#f00':'#000' }
                        }, params.row.is_ban == 1 ? '已封号' : '正常');
                    }
                },
                {
                    title: '单位名称', align: 'center', key: 'enterprise_name'
                },
                {
                    title: '会员类型', align: 'center', render: (h, params) => {
                        return h('div', ['','','','个人','企业','服务机构'][params.row.role_type]);
                    }
                },
                {
                    title: '注册日期', align: 'center', key: 'create_time', sortable: "custom", render: (h, params) => {
                        return h('div', params.row.formated_create_time);
                    }
                },
                {
                    title: '审核状态', align: 'center', render: (h, params) => {
                        return [
                            h('div', { style: { color: 'gray' } }, '未提交'),
                            h('div', { style: { color: 'orange' } }, '待审核'),
                            h('div', { style: { color: 'green' } }, '已通过'),
                            h('div', { style: { color: 'red' } }, '审核未通过')
                        ][params.row.status];
                    }
                },
                {
                    title: '操作', key: 'action', align: 'center', width: 300, render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: { type: 'info', size: 'small' },
                                style: { marginRight: '5px' },
                                on: { click: () => { this.handleShowDetail(params.row.id); } }
                            }, '查看详情'),
                            h('Button', {
                                props: { type: params.row.is_ban == 1 ? 'warning' : 'primary', size: 'small' },
                                style: { marginRight: '5px',display:this.showButton("110424")},
                                on: { click: () => { this.handleStatus(params.row.id, params.row.is_ban == 1 ? 1 : 2) } }
                            }, params.row.is_ban == 1 ? '解封' : '封号'),
                            h('Button', {
                                props: { type: 'info', size: 'small' },
                                style: { marginRight: '5px',display:this.showButton("110425") },
                                on: { click: () => { this.handleSendMessage(params.row.id, false) } }
                            }, '发送消息'),
                            h('Button', {
                                props: { type: 'error', size: 'small' },
                                style: { marginRight: '5px',display:this.showButton("110412") },
                                on: { click: () => { this.handleDelete(params.row.id) } }
                            }, '删除')
                        ]);
                    }
                }
            ]
        }
    },
    computed: {
        data() {
            return Member.parseList(this.page.list);
        },
        formatedMessage() {
            return Object.assign({}, this.modal.data, {
                time: this.modal.data.time==""? "":Date.parse(this.modal.data.time)
            });
        },
        formatedSearch() {
            return this.$refs["auto-query"].getActionData();
        },
        is_service() {
            return this.detail_modal.data.role_type == 5;
        },
        is_demand() {
            return this.detail_modal.data.role_type != 5;
        },
        role_type_name() {
            return ["","","","个人","企业","服务机构"][this.detail_modal.data.role_type];
        }
    },
    methods: {
        handleSendMessage(id, is_batch) {
            if(is_batch) this.$refs["auto-query"].search();
            this.modal.data.id = id;
            this.modal.is_batch = is_batch;
            this.modal.is_show = true;
        },
        cancel() {
            this.modal.is_show = false;
        },
        ok() {
            this.$refs['formValidate'].validate((valid) => {
                if (valid) {
                    if(this.modal.is_batch) {
                        this.api.post('memberMessage/send_batch', Object.assign({}, this.formatedMessage, this.formatedSearch), res => {
                            this.$CustomMessage.success('批量消息发送成功');
                            this.modal.is_show = false;
                        });
                    }else {
                        this.api.post('memberMessage/send', this.formatedMessage, res => {
                            this.$CustomMessage.success('发送成功');
                            this.modal.is_show = false;
                        });
                    }
                }
            });
        },
        handleShowDetail(id) {
            this.api.post('member/get', { id: id }, res => {
                this.detail_modal.data = Member.parse(res.data);
                this.detail_modal.is_show = true;
            });
        },
        handleStatus(id, status) {
            this.api.post('member/status', { id: id, status: status }, res => {
                this.page.getData();
            });
        },
        handleDelete(id) {
            if(!confirm('确定删除会员吗？')) return;
            this.api.post('member/delete', { id: id }, res => {
                this.$CustomMessage.success('删除成功');
                this.page.getData();
            });
        }
    },
    created() {
        var status = this.$route.query.status || '-1';
        var role_type = this.$route.query.role_type || '0';

        this.query.status.default = status;
        this.query.role_type.default = role_type;
    }
}
    
</script>


<style>
  .sheet p{
    margin:5px;
  }
  .sheet table {
      font-family: Verdana;
      font-weight: bold;  
      border-width: 1px;    
      width: 100%;
      border-collapse: collapse;
  }
  .sheet table thead th{        
      background-color: rgb(81, 130, 187);
      color: #fff;
      border-bottom-width: 0;
  }
  .sheet table tr {
      border-bottom-width: 0;
  }
  .sheet table td {
      border-right: solid 1px rgb(81, 130, 187);  
  }
  .sheet table tr, .sheet table th {
      border-width: 1px;
      border-style: solid;
      border-color: rgb(81, 130, 187);
  }
  .sheet table td, .sheet table th {
      padding: 5px 10px;
      font-size: 13px;
      /* font-family: Verdana;
      font-weight: bold; */
  }
</style>